<script setup lang="ts">
import { defineProps, ref, onMounted } from 'vue'
import QRCode from 'qrcode';

const props = defineProps({
  qrcode: {
    type: String,
    required: true
  },
  width: {
    type: Int8Array
  },
  color: {
    type: String
  },
  bgColor: {
    type: String
  }

})
onMounted( ()=> {
  getQrcodeImage()
})

const qrcodeImg = ref('');

async function getQrcodeImage() {
  qrcodeImg.value = await QRCode.toDataURL(props.qrcode, {
    width: props.width,
    height: props.width,
    color: {
      dark: props.color, // 二维码的颜色
      light: props.bgColor // 背景色
    }
  });

}

</script>

<template>
  <img :src="qrcodeImg" alt="QR Code" />
</template>

